<template> 
  <div class="app-container">
      <i class="el-icon-tickets" style="margin-top: 5px"></i>
      <span style="margin-top: 5px">属性列表</span>

    <div class="table-container">
      <el-table ref="productAttrTable"
                :data="list"
                style="width: 100%"
                :max-height="tableHeight"
                @selection-change="handleSelectionChange"
                v-loading="listLoading"
                border>
        <el-table-column label="编号" width="100" align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>

        <el-table-column
          label="属性集合名称"
          width="110"
          align="center"
          property="attrCategoryName">
        </el-table-column>

        <el-table-column label="属性名称" width="120" align="center">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column
          label="属性类型"
           width="100"
           align="center"
           property="type"
          :formatter="formatterAttrTypeFn">
        </el-table-column>
        <el-table-column
          property="selectType"
          :formatter="formatterSelectTypeFn"
          label="选择类型"
          width="100">
        </el-table-column>
        <el-table-column
          property="searchType"
          :formatter="formatterSearchTypeFun"
          label="检索类型"
          width="140">
        </el-table-column>
        <el-table-column label="属性值的录入方式" width="150" align="center"
                         property="inputType"
                         :formatter="formatterInputTypeFun"
        >
        </el-table-column>
        <el-table-column label="可选值列表" align="center">
          <template slot-scope="scope">{{scope.row.inputList}}</template>
        </el-table-column>
        <el-table-column label="排序" width="100" align="center">
          <template slot-scope="scope">{{scope.row.sort}}</template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
  import {listAllAttr} from '@/api/productAttr'
  import {formatterSearchType,formatterInputType } from '@/views/pms/productAttr/type/productAttrType';
  import {formatterAttrType, formatterSelectType} from "../type/productAttrType";
  export default {
    name: 'productAttrAllList',
    props: ['cidList', 'tableHeight'],
    data() {
      return {
        list: null,
        listLoading: true,
        listQuery: {
          attributeSetIdList:null
        },
        operateType: null,
        multipleSelection: []
      }
    },
    created() {
      this.getList();
    },
    watch: {
      'cidList': function(newVal) {
        this.getList();
      }
    },
    methods: {
      getList() {
        this.listLoading = true;
        this.listQuery.attributeSetIdList=this.cidList;
        if(!this.cidList || this.cidList.length === 0){
          return;
        }
        listAllAttr(this.listQuery).then(response => {
          this.listLoading = false;
          this.list = response.data;
        });
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      formatterSelectTypeFn(row){
        return formatterSelectType(row);
      },
      formatterInputTypeFun(row){
        return formatterInputType(row);
      },
      formatterSearchTypeFun(row){
        return formatterSearchType(row);
      },
      formatterAttrTypeFn(row){
        return formatterAttrType(row);
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>


